<!DOCTYPE html>
<html>
<head>

    <ling "../common/header.ftl"/>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi" name="viewport" >
    <link rel="stylesheet" type="text/css" href="/js/qianbao/reset.css">
    <link rel="stylesheet" type="text/css" href="/js/qianbao/weichat.css">

    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/index.css" rel="stylesheet">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>

    <title>My Wallet</title>

    <script type="text/javascript">
        $(function () {






            //获取用户信息
            var user = JSON.parse(sessionStorage.getItem("user"));
            //全局变量,保存支付密码
            var pass;
            if (user.id){
                //发送请求,回显数据
                $.get("/wallets/"+user.id, function (data){
                    pass=data.password;
                    //余额
                    $("#residue").html("￥"+data.money)


                    //充值按钮 绑定点击事件(需要用的data数据回显)
                    $(".in-int").click(function () {
                        //回显卡号
                        $("#bankCard").val(data.bankCard);
                        //回显隐藏id
                        $("#walletId").val(data.id);

                        //模态框展现
                        $("#showMoneyModal").modal("show");

                    });



                });
            }else{
                $(document).dialog({
                    type: 'notice',
                    infoText: '亲,要评论请先登录',
                    autoClose: 1500,
                    position: 'center'  // center: 居中; bottom: 底部
                });
                setTimeout(function () {
                    window.location.href="/login.html";
                },1500)
            }



            $(".btn-submit").click(function () {
                //获取输入的密码
                var password = $("#password").val();
                //获取输入的金额
                var m = $("#money").val();
                if(password.length>0 && m.length>0){
                    if(password==pass) {
                        console.log(123);

                        $("#editForm").ajaxSubmit(function (data) {
                            if (data.success) {

                                $(document).dialog({
                                    titleText: "温馨提示",
                                    content: "亲,充值成功,并获取了相应的积分,去积分商城逛逛吧!",
                                    //onClosed弹框关闭之后执行
                                    onClosed:function () {
                                        //没有结果就返回上一级页面
                                        window.location.reload();
                                    }
                                });

                            }


                        });

                    }else{
                        alert("亲,密码不正确")
                        window.location.reload();
                    }
                }else{
                    alert("亲,请输入金额和密码")
                }

            });











        });

    </script>

</head>
<body>
<div class="wrap">


    <div class="top-bar">
        <a href="/mine/profiles.html">
            <span><i class="fa fa-chevron-left" ></i></span>
        </a>
    </div>
    <div class="wallet-content">
        <div class="wallet-box">
            <img src="/js/qianbao/img/aq.png">
            <h2>我的零钱</h2>
            <h3 id="residue"></h3>
            <button class="in-int">充值</button>
            <button class="out">积分商城</button>

        </div>
    </div>
</div>



<!-- 模态框（Modal） -->
<div class="modal fade" id="showMoneyModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>

            </div>
            <h4 class="modal-title" align="center">充值服务</h4>
            <div class="modal-body">
                <form class="form-horizontal" action="/wallets/charge" method="post" id="editForm">
                    <input type="hidden" name="id" id="walletId" >
                    <div class="form-group">
                        <label  class="col-sm-4 control-label">充值金额：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="money" name="money" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-4 control-label">银行卡号：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="bankCard" name="bankCard" readonly >
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-4 control-label">支付密码：</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" id="password" name="password" >
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary btn-submit">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
</html>